<template>
  <div id="Topbar">
      <v-system-bar
        lights-out
        window
        class="top"
        height="36"
      >
        <!-- spacer 能够向右浮动 -->
        <v-spacer></v-spacer>
        <!-- <v-icon >mdi-heart-circle</v-icon> -->
        <v-icon color="indigo lighten-5" @click="mini()" small>mdi-minus</v-icon>
        <v-icon color="indigo lighten-5" dark @click="maxi()" small>mdi-checkbox-blank-outline</v-icon>
        <v-icon color="indigo lighten-5" dark @click="close()" small>mdi-close</v-icon>
      </v-system-bar>
  </div>
</template>

<script>
export default {
    methods:{
      mini() {
        console.log("mini")
      },
      maxi() {
        console.log("maxi")
      },
      close() {
        console.log("close")
      }
    }
}
</script>

<style scoped>
#Topbar{
}
.top{
  -webkit-app-region: drag;
}
.top .v-icon {
  padding:4px 6px;
}
button, a, input, textarea, .v-icon{
  -webkit-app-region: no-drag;
}
.v-system-bar /deep/ .v-icon.v-icon::after{
  border-radius:0;
}
.theme--light.v-system-bar--lights-out {
  background-color: #afbeca !important;
}
</style>
